<template>
  <n-card :bordered="false" class="proCard">
    <n-grid cols="1" responsive="screen">
      <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
        <n-form
          :label-width="120"
          :model="formValue"
          :rules="rules"
          label-placement="top"
          ref="formRef"
          class="py-8"
        >
          <n-grid :cols="24" :x-gap="24">
            <n-grid-item :span="12">
              <n-form-item label="游戏名称:" path="gameName">
                <n-input v-model:value="formValue.gameName" clearable placeholder="请输入游戏名称"/>
              </n-form-item>
              <n-form-item label="分成比例(%):" path="proportion">
                <n-input v-model:value="formValue.proportion" clearable placeholder="请输入分成比例"/>
              </n-form-item>
              <n-form-item label="游戏地址连接:" path="gameUrl">
                <n-input v-model:value="formValue.gameUrl" clearable placeholder="请输入游戏地址连接"/>
              </n-form-item>
              <n-form-item label="CP支付回调:" path="payCallbackUrl">
                <n-input v-model:value="formValue.payCallbackUrl" placeholder="请输入CP支付回调"/>
              </n-form-item>
              <n-form-item label="游戏描述:" path="gameDesc">
                <n-input v-model:value="formValue.gameDesc" type="textarea" clearable placeholder="请输入游戏描述"/>
              </n-form-item>
              <n-form-item label="游戏预览图:" clearable path="img">
                <BasicUpload
                  :action="`/api/system/oss/upload`"
                  :headers="uploadHeaders"
                  name="files"
                  :width="100"
                  :height="100"
                  @uploadChange="uploadOverviewChange"
                  v-model:value="overViewList"
                />
              </n-form-item>
            </n-grid-item>
            <n-grid-item :span="12">
              <n-form-item :span="12" label="游戏icon:" path="img">
                <BasicUpload
                  :action="`/api/system/oss/upload`"
                  :headers="uploadHeaders"
                  name="files"
                  :width="200"
                  :height="200"
                  :maxNumber=1
                  @uploadChange="uploadIconChange"
                  v-model:value="iconList"
                />
              </n-form-item>
              <n-form-item label="实名认证" path="cardAuth">
                <n-radio-group
                  v-model:value="formValue.cardAuth"
                  name="left-size"
                  style="margin-bottom: 12px"
                >
                  <n-radio-button value="disable">
                    不需要授权
                  </n-radio-button>
                  <n-radio-button value="able">
                    需要授权
                  </n-radio-button>
                </n-radio-group>
              </n-form-item>
            </n-grid-item>
          </n-grid>
          <n-grid :cols="6">
            <n-grid-item :offset="5">
              <n-space>
                <n-button type="primary" @click="formSubmit">提交</n-button>
                <n-button @click="resetForm">重置</n-button>
              </n-space>
            </n-grid-item>
          </n-grid>
        </n-form>
      </n-grid-item>
    </n-grid>
  </n-card>
</template>

<script lang="ts">
  import {computed, h, defineComponent, onMounted, onActivated, reactive, ref, unref} from 'vue';
  import {useDialog, useMessage} from 'naive-ui';
  import {PlusOutlined} from '@vicons/antd';
  import {useRouter} from 'vue-router';
  import {useGlobSetting} from "@/hooks/setting";
  import {GameModel} from "@/api/game/game";
  import {useUserStoreWidthOut} from "@/store/modules/user";


  export default defineComponent({

    props: {
      defaultValue: Object,
      default: {}
    },

    emits: ["submit"],

    setup(props, {emit}) {
      const router = useRouter();
      const formRef: any = ref(null);
      const message = useMessage();
      const globSetting = useGlobSetting();
      const {uploadUrl} = globSetting;

      //游戏预览图列表
      const overViewList = ref([]);

      //游戏icon列表
      const iconList = ref([]);

      const formValue = ref({});

      const dialog = useDialog();
      const userStore = useUserStoreWidthOut();

      const uploadHeaders = {
        Authorization: userStore.getToken
      };

      const rules = {
        gameName: {
          required: true,
          message: '请输入游戏名称',
          trigger: 'blur',
        },
        proportion: {
          required: true,
          message: '请输入分成比例',
          trigger: 'blur',
        },
        gameUrl: {
          required: true,
          message: '请输入游戏地址',
          trigger: 'blur',
        },
        payCallbackUrl: {
          required: true,
          message: '请输入CP支付回调地址',
          trigger: 'blur',
        },
        cardAuth: {
          required: true,
          message: '请选择实名认证方式',
          trigger: 'blur',
        }
      };


      function uploadOverviewChange(files: any[]) {
        overViewList.value = unref(files)
      }

      function uploadIconChange(files: any[]) {
        iconList.value = unref(files)
      }

      function formSubmit() {
        formRef.value.validate((errors) => {
          if (!errors) {
            let iconUrls = unref(iconList).length > 0 ? unref(iconList).join(",") : "";
            let previewUrls = unref(iconList).length > 0 ? unref(overViewList).join(",") : "";
            let value = Object.assign({}, unref(formValue), {proportion: parseInt(unref(formValue).proportion)}, {iconUrls}, {previewUrls}) as GameModel;
            emit("submit", value)
          } else {
            message.error('验证失败，请填写完整信息');
          }
        });

      }

      function resetForm() {

        dialog.warning({
          title: '警告',
          content: `重置将清空当前设置，是否重置？`,
          positiveText: '确定',
          negativeText: '取消',
          onPositiveClick: () => {
            formValue.value = unref(props).defaultValue;
            //赋值图片列表
            let gameModel = unref(formValue) as GameModel;
            if (gameModel.iconUrls) {
              iconList.value.push(gameModel.iconUrls.split(","))
            }
            if (gameModel.previewUrls) {
              overViewList.value.push(gameModel.previewUrls.split(","))
            }
          },
          onNegativeClick: () => {
          },
        });
      }

      onMounted(async () => {
        formValue.value = unref(props).defaultValue;
        if (unref(formValue).proportion) {
          unref(formValue).proportion = unref(formValue).proportion + "";
        }
        //赋值图片列表
        let gameModel = unref(formValue) as GameModel;
        if (gameModel.iconUrls) {
          iconList.value = gameModel.iconUrls.split(",")
        }
        if (gameModel.previewUrls) {
          overViewList.value = gameModel.previewUrls.split(",")
        }
      });

      return {
        formValue,
        overViewList,
        iconList,
        formSubmit,
        uploadIconChange,
        uploadOverviewChange,
        resetForm,
        uploadHeaders,
        rules,
        formRef
      }
    }


  })
</script>

<style lang="less" scoped></style>
